<template>
	<div class="wrapper">
		<view class="cart_title">
			购物车
		</view>
		<!-- 空白页-->
		<view v-if="cartList == []" class="empty">
			<image src="/static/emptyCart.png" mode="aspectFit"></image>
			<view class="empty-tips">
				空空如也
				<navigator class="navigator" url="/pages/tabbar/home/index" open-type="switchTab">随便逛逛></navigator>
			</view>
		</view>

		<view class="cartListView">
			<u-checkbox-group @change="checkboxGroupChange" style="width: 100%;">
				<view class="cartListViewItem" v-for="(item,index) in cartList">
					<view class="cartListViewItem_name">
						<u-image src="/static/tabbar/store.png" width="32" height="32"></u-image>
						<view class="cartListViewItem_name_name" @click.stop="navigateTo(`/pages/product/shopPage?id=${item.product.storeId}`)">
							<span>{{item.product.storeName}}</span>
							<u-image src="/static/businessImg/righticon.png" width="11" height="20" mode="scaleToFill"
								style="display: flex;margin-left: 40rpx;"></u-image>
						</view>
						<view class="cartListViewItem_name_del" @click="delItem(item)">
							<u-image src="/static/img/del.png" width="24" height="27"></u-image>
						</view>
					</view>

					<view class="cartListViewItem_radio">
						<u-checkbox @change="checkboxChange" v-model="item.checked" shape="circle" :name="item.index" active-color="red"></u-checkbox>
					</view>
					<view class="cartListViewItem_Img">
							<u-image :src="item.product.image" width="100%" height="100%"></u-image>
					</view>
					
					<view class="cartListViewItem_title">
						{{item.product.name}}
					</view>
					
					<view class="cartListViewItem_guige">
						{{item.currentskuid.name}}
					</view>
					<view class="cartListViewItem_price">
						￥{{item.currentskuid.price}}
					</view>
					
					<view class="cartListViewItem_p">
						<uni-number-box class="uNumber" :min="0" :max="999" v-model="item.num"></uni-number-box>
					</view>
				</view>

			</u-checkbox-group>
		</view>


		<div class="box box6">
			<view class="navL">
				<u-checkbox shape="circle" :active-color="lightColor" v-model="checkout" @change="checkOut()"
					label-size="24">全选
				</u-checkbox>
				<span class="price">
					<div class="prices">
						<div class="fullPrice">
							<span class="number">总计:{{total}}</span>
						</div>

					</div>
				</span>
			</view>
			<view @click="submitOrder()">
				<div class="settlement">去结算</div>
			</view>
		</div>
	</div>
</template>
<script>
	import * as API_Trade from "@/api/trade";

	import uniNumberBox from '@/components/uni-number-box'
	export default {
		components: {
			uniNumberBox
		}, // 数量加减组件
		data() {
			return {
				cartList: [],
				lightColor: this.$lightColor,
				checkout: false, //全选按钮
				selectObj: []
			};
		},
		
		computed: {
			total(){
				const { cartList, selectObj} = this;
				let arr = [];
				let total = 0
			
				selectObj.forEach(item => {
					cartList.forEach(item2 => {
						if(item.index == item2.index){
							arr.push(item)
						}
					})
				});
				arr.forEach(item => {
					total = total + Number(item.num) * Number(item.currentskuid.price)
				})
				return total.toFixed(2)
			}
		},
		mounted() {

		},
		onPullDownRefresh() {

		},

		onShow() {
			this.getCardData();
			this.selectObj = []
		},
		methods: {
			navigateToStore(val) {
				uni.navigateTo({
					url: "/pages/product/shopPage?id=" + val.storeId,
				});
			},
			navigateTo(url) {
				uni.navigateTo({
					url,
				});
			},
			
			checkboxChange(e){
				
				if(e.value == true){
				
					this.selectObj.push(this.cartList[e.name])
				}else{
					
					this.selectObj.forEach((item, index) => {
						if(item.index == e.name){
							this.selectObj.splice(index, 1)
						}
					})
				}
				
		
				
			},
			checkOut() {
				
				
				if(!this.checkout){
					const obj =  this.cartList.map(item => {
						return {
							...item,
							checked: false
						}
					})
					this.cartList = obj;
					this.selectObj = []
				}else{
					const obj =  this.cartList.map(item => {
						return {
							...item,
							checked: true
						}
					})
					this.cartList = obj;
					this.selectObj = obj
				}
			},
			
			delItem(item){
			
				this.cartList.forEach((i, index) => {
					if(item.index == i.index){
						this.cartList.splice(index, 1)
						this.selectObj.forEach((j,index2) => {
							if(item.index == j.index){
								this.selectObj.splice(index2, 1)
							}
						})
					}
				})
				
			
				uni.setStorageSync("currentCart", this.cartList);
				this.getCardData()
			},
			async getCardData() {
				let obj = await uni.getStorageSync("currentCart");
				if(obj.length == 0) return
				obj.map((item, index) => {
					item.index = index;
					item.checked = false
				})
				
				

				const arr =  obj.reduce((r, c) => {
					let l = null
					let inx = 0
					r.forEach((i, index) => {
						if(i.product.id == c.product.id && i.currentskuid.id == c.currentskuid.id){
							l = i
							inx = index
						}
					})
					if(l != null){
						r.splice(inx, 1, {...c, num: Number(l.num) + Number(c.num)})
					}else{
						r.push(c)
					}
					return r
				}, [])
				this.cartList = arr
			},
			
			submitOrder(){
				const { cartList, selectObj} = this;

				if(selectObj.length == 0){
					return uni.showToast({
						icon:"none",
						title:'请选择商品'
					})
				}
				let arr = [];
				selectObj.forEach(item => {
					cartList.forEach(item2 => {
						if(item.index == item2.index){
							arr.push(item)
						}
					})
				})
				
				uni.setStorageSync("currentBuy", {
					products: [...arr]
				});
				uni.navigateTo({
					url: `/pages/order/fillorder?way=BUY_NOW`,
				});
			},

			checkboxGroupChange() {},
		},
	};
</script>

<style lang="scss">
	page {
		background: #f2f2f2;
	}
</style>
<style scoped lang="scss">
	.u-image {
		box-shadow: 0 4rpx 12rpx 0 rgba(0, 0, 0, 0.05);
	}

	.cart_title {
		width: 100%;
		height: 162rpx;
		background: rgb(22, 201, 65);
		line-height: 200rpx;
		text-align: center;
		font-family: Microsoft YaHei;
		font-weight: 400;
		font-size: 36rpx;
		color: #FFFFFF;
	}






	/* 空白页 */
	/deep/ .u-number-input {
		background: #fff !important;
		border: 1px solid #ededed;
		margin: 0 !important;
	}

	/deep/ .u-icon-minus,
	/deep/ .u-icon-plus {
		background: #ffffff !important;
		border: 1px solid #ededed;
		color: #333 !important;
		width: 40rpx;
	}

	.empty {
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		height: 100vh;
		z-index: 99;
		padding-bottom: var(--window-bottom);
		display: flex;
		justify-content: center;
		flex-direction: column;
		align-items: center;
		background: #fff;

		image {
			width: 240rpx;
			height: 160rpx;
			margin-bottom: 30rpx;
		}

		.empty-tips {
			display: flex;
			font-size: $font-sm + 2rpx;
			color: $font-color-disabled;

			.navigator {
				color: $uni-color-primary;
				margin-left: 16rpx;
			}
		}
	}

	.settlement {
		width: 180rpx;
		height: 70rpx;
		line-height: 70rpx;
		background: linear-gradient(91deg, $light-color 1%, $aider-light-color 99%);
		border-radius: 900rpx;
		text-align: center;
		color: #fff;
		margin-right: 10rpx;
	}

	.cartListView {
		width: 100%;
		padding: 0 13rpx;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		padding-bottom: 148rpx;
	}

	.cartListViewItem {
		width: 100%;
		background: #FFFFFF;
		height: 280rpx;
		position: relative;
		margin-top: 27rpx;
		border-radius: 10rpx;
		padding: 25rpx 0;
	}

	.cartListViewItem_name {
		width: 100%;
		padding-left: 78rpx;
		padding-right: 34rpx;
		height: 32rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.cartListViewItem_name_name {
		height: 32rpx;
		flex: 1;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		padding-left: 20rpx;
		line-height: 32rpx;
	}
	
	.cartListViewItem_radio {
		position: absolute;
		top: 136rpx;
		left: 20rpx;
	}
	
	.cartListViewItem_Img {
		width: 138rpx;
		height: 137rpx;
		position: absolute;
		top: 86rpx;
		left: 76rpx;
	}
	
	.cartListViewItem_title {
		width: 362rpx;
		height: 54rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		font-size: 24rpx;
		color: #000000;
		line-height: 27rpx;
		position: absolute;
		top: 88rpx;
		left: 235rpx;
		
	}
	
	.cartListViewItem_guige {
		
		height: 25rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		font-size: 25rpx;
		color: #999999;
		line-height: 25rpx;
		position: absolute;
		top: 157rpx;
		left: 234rpx;
		
	}
	
	.cartListViewItem_price {
		
		height: 21rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		font-size: 26rpx;
		color: #F74600;
		line-height: 21rpx;
		position: absolute;
		top: 202rpx;
		left: 237rpx;
	}
	
	.cartListViewItem_p {
		position: absolute;
		top: 194rpx;
		right: 33rpx;
	}



	.wrapper {
		height: 100%;

	}







	.box6 {
		justify-content: space-between;
		position: fixed;
		// #ifdef APP-PLUS || MP-WEIXIN
		bottom: 0;
		// #endif
		// #ifdef H5
		bottom: var(--window-bottom);
		// #endif
		left: 0;
		border-top: 1px solid #ededed;
		display: flex;
		height: 100rpx;
		overflow: hidden;
		align-items: center;
		width: 100%;
		background: rgba(255, 255, 255, 1);
		color: #333;
		z-index: 99;

		>.navL {
			padding: 0 32rpx;
			display: flex;
			align-items: center;
		}
	}
</style>
